<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <!-- 1.导入vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- v-on:XXXX  全写的一个鼠标点击事件 -->
    <button v-on:click="showInfo(1)">点我提示信息</button>
    <!-- v-on:的简写方式直接是：@ -->
    <button @click="showInfo1">点我提示信息1（不传参）</button>
    <!-- 主动传事件本身 v-on:  可以简写为@-->
    <button @click="showInfo2($event,66,'liwei')">点我提示信息2（传参）</button>
    </div>
</body>
    <!-- 3.new Vue()  构造Vue实例对象 -->
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#app',
            //函数式 的数据data定义
            data() {
                return {
                    name:'李伟'
                }
            },
            // 这个showInfo函数需要写在methods对象里面，
            //showInfo最终会挂在到Vue实例对象连
            methods:{
                //带一个自定义的参数
                showInfo(id){
                    console.log(id)
                    console.log(this == Vue)
                    console.log(this == vm)
                    console.log("点我提示信息进来了,打印的是data.name值",this.name)    
                },
                // 什么都不带，单数默认有event事件
                showInfo1(){
                    console.log("不带参数的触发事件")    
                },
                showInfo2(e,number,name){
                    console.log(e.target.innerText)
                    console.log("带参数的触发事件",number,name)
                }
            }
        })
       
    </script>
</html>